{% extends 'base.html' %}
{% load static %}

{% block title %}{{ worldcup.name }} - 常规赛排行榜 - Creeps Judge{% endblock %}

{% block extra_css %}
<link href="{% static 'css/worldcup.css' %}" rel="stylesheet">
<style>
    .container {
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
    }

    .page-header {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        border: 2px solid rgba(255, 215, 0, 0.5);
        padding: 30px;
        margin-bottom: 30px;
        text-align: center;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 215, 0, 0.2),
            inset 0 0 15px rgba(255, 255, 255, 0.05);
    }

    .page-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: #FFD700;
        margin: 0 0 10px;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .page-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 30, 60, 0.8) 100%);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        border: 1px solid rgba(255, 215, 0, 0.3);
        padding: 20px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }

    .stat-icon {
        font-size: 2rem;
        margin-bottom: 10px;
        display: block;
    }

    .stat-label {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #FFD700;
        margin: 0;
    }

    .leaderboard {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        border: 2px solid rgba(255, 215, 0, 0.3);
        overflow: hidden;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 215, 0, 0.1),
            inset 0 0 15px rgba(255, 255, 255, 0.05);
    }

    .leaderboard-header {
        background: rgba(255, 215, 0, 0.1);
        padding: 20px 30px;
        border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    }

    .leaderboard-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #FFD700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .leaderboard-table {
        width: 100%;
        border-collapse: collapse;
    }

    .leaderboard-table th {
        background: rgba(255, 215, 0, 0.1);
        color: #FFD700;
        font-weight: 600;
        padding: 15px 20px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .leaderboard-table th:first-child {
        text-align: center;
        width: 80px;
    }

    .leaderboard-table th:nth-child(3),
    .leaderboard-table th:nth-child(5),
    .leaderboard-table th:last-child {
        text-align: center;
        width: 100px;
    }

    .leaderboard-table th:nth-child(4) {
        text-align: center;
        width: 120px;
    }

    .leaderboard-table th:nth-child(2) {
        width: 150px;
        padding-right: 10px;
    }

    .leaderboard-table td {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background-color 0.3s ease;
    }

    .leaderboard-table tbody tr:hover {
        background: rgba(255, 215, 0, 0.05);
    }

    .rank-cell {
        text-align: center;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .rank-1 {
        color: #FFD700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .rank-2 {
        color: #C0C0C0;
        text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
    }

    .rank-3 {
        color: #CD7F32;
        text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
    }

    .rank-top16 {
        color: #32CD32;
        font-weight: 600;
    }

    .rank-other {
        color: rgba(255, 255, 255, 0.8);
    }

    .user-cell {
        text-align: left;
        padding-right: 10px;
    }

    .user-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .username {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1rem;
    }

    .battles-cell {
        text-align: center;
    }

    .battles-count {
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
    }

    .record-cell {
        text-align: center;
    }

    .record-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .record-display .wins {
        color: #32CD32;
    }

    .record-display .losses {
        color: #FF6B6B;
    }

    .record-display .draws {
        color: #FFD700;
    }

    .record-display .separator {
        color: rgba(255, 255, 255, 0.4);
        margin: 0 2px;
    }

    .winrate-cell {
        text-align: center;
    }

    .winrate-display {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .winrate-value {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
    }

    .winrate-bar {
        width: 60px;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        overflow: hidden;
    }

    .winrate-fill {
        height: 100%;
        background: linear-gradient(90deg, #32CD32, #FFD700);
        border-radius: 2px;
        transition: width 0.3s ease;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .score-cell {
        text-align: center;
        font-weight: 700;
        font-size: 1.2rem;
        color: #FFD700;
    }

    .medal {
        font-size: 1.5rem;
        margin-right: 5px;
    }

    .qualification-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-left: 10px;
    }

    .qualified {
        background: linear-gradient(135deg, #32CD32, #228B22);
        color: white;
        box-shadow: 0 2px 8px rgba(50, 205, 50, 0.3);
    }

    .eliminated {
        background: linear-gradient(135deg, #DC143C, #B22222);
        color: white;
        box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
    }

    .breadcrumb {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 15px 20px;
        margin-bottom: 20px;
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    .breadcrumb-item {
        color: rgba(255, 255, 255, 0.7);
    }

    .breadcrumb-item.active {
        color: #FFD700;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: '>';
        color: rgba(255, 255, 255, 0.5);
        margin: 0 8px;
    }

    .breadcrumb a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .breadcrumb a:hover {
        color: #FFD700;
        text-decoration: none;
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-top: 30px;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 12px 25px;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-warning {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }

    .btn-warning:hover {
        background: linear-gradient(135deg, #e0a800, #d39e00);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
        color: #212529;
        text-decoration: none;
    }

    .btn-secondary {
        background: linear-gradient(135deg, #6c757d, #545b62);
        color: white;
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #545b62, #495057);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
        color: white;
        text-decoration: none;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: rgba(255, 255, 255, 0.6);
    }

    .empty-icon {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .top-actions {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 30, 60, 0.8) 100%);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        border: 1px solid rgba(255, 215, 0, 0.3);
        padding: 20px;
        margin: 20px 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .buttons-container {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }

    .top-actions .btn-action {
        padding: 12px 25px;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
    }

    .top-actions .btn-secondary {
        background: linear-gradient(135deg, #6c757d, #545b62);
        color: white;
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    }

    .top-actions .btn-secondary:hover {
        background: linear-gradient(135deg, #545b62, #495057);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
        color: white;
        text-decoration: none;
    }

    .top-actions .btn-warning {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }

    .top-actions .btn-warning:hover {
        background: linear-gradient(135deg, #e0a800, #d39e00);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
        color: #212529;
        text-decoration: none;
    }

    .top-actions .btn-refresh {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .top-actions .btn-refresh:hover {
        background: linear-gradient(135deg, #1e7e34, #155724);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        color: white;
        text-decoration: none;
    }

    .top-actions .btn-refresh:active {
        transform: translateY(0);
    }

    .top-actions .refresh-icon {
        transition: transform 0.3s ease;
    }

    .top-actions .btn-refresh:hover .refresh-icon {
        transform: rotate(180deg);
    }


</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'battles:worldcup_list' %}">世界杯列表</a></li>
            <li class="breadcrumb-item"><a href="{% url 'battles:worldcup_detail' worldcup.id %}">{{ worldcup.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">常规赛排行榜</li>
        </ol>
    </nav>

    <!-- 页面头部 -->
    <div class="page-header">
        <h1 class="page-title">🥇 {{ worldcup.name }} - 常规赛排行榜</h1>
        <p class="page-subtitle">实时显示常规赛对战结果和积分排名</p>
    </div>

    <!-- 顶部操作按钮 -->
    <div class="top-actions">
        <div class="buttons-container">
            <a href="{% url 'battles:worldcup_detail' worldcup.id %}" class="btn-action btn-secondary">
                ← 返回详情
            </a>
            {% if worldcup.status == 'championship' or worldcup.status == 'finished' %}
            <a href="{% url 'battles:worldcup_championship' worldcup.id %}" class="btn-action btn-warning">
                🏆 冠军赛对战图
            </a>
            {% endif %}
            <button type="button" class="btn-action btn-refresh" onclick="refreshLeaderboard()">
                <i class="fas fa-sync-alt refresh-icon"></i> 刷新排行榜
            </button>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-grid">
        <div class="stat-card">
            <span class="stat-icon">👲</span>
            <div class="stat-label">参赛人数</div>
            <div class="stat-value">{{ participants|length }}</div>
        </div>
        <div class="stat-card">
            <span class="stat-icon">⚔️</span>
            <div class="stat-label">总对战数</div>
            <div class="stat-value">{{ total_matches|default:0 }}</div>
        </div>
        <div class="stat-card">
            <span class="stat-icon">✅</span>
            <div class="stat-label">已完成对战</div>
            <div class="stat-value">{{ completed_matches|default:0 }}</div>
        </div>
        <div class="stat-card">
            <span class="stat-icon">🔄</span>
            <div class="stat-label">进行中</div>
            <div class="stat-value">{{ running_matches|default:0 }}</div>
        </div>
        <div class="stat-card">
            <span class="stat-icon">⏸️</span>
            <div class="stat-label">等待中</div>
            <div class="stat-value">{{ waiting_matches|default:0 }}</div>
        </div>
        <div class="stat-card">
            <span class="stat-icon">❌</span>
            <div class="stat-label">错误</div>
            <div class="stat-value">{{ error_matches|default:0 }}</div>
        </div>
    </div>



    <!-- 排行榜 -->
    <div class="leaderboard">
        <div class="leaderboard-header">
            <h2 class="leaderboard-title">
                <span>🥇</span>
                常规赛排行榜
            </h2>
        </div>

        {% if participants %}
        <table class="leaderboard-table">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>用户</th>
                    <th>对战</th>
                    <th>胜/负/平</th>
                    <th>胜率</th>
                    <th>积分</th>
                </tr>
            </thead>
            <tbody>
                {% for participant in participants %}
                <tr>
                    <td class="rank-cell">
                        {% if forloop.counter == 1 %}
                            <span class="medal">🥇</span><span class="rank-1">{{ forloop.counter }}</span>
                        {% elif forloop.counter == 2 %}
                            <span class="medal">🥈</span><span class="rank-2">{{ forloop.counter }}</span>
                        {% elif forloop.counter == 3 %}
                            <span class="medal">🥉</span><span class="rank-3">{{ forloop.counter }}</span>
                        {% elif forloop.counter <= 16 %}
                            <span class="rank-top16">{{ forloop.counter }}</span>
                        {% else %}
                            <span class="rank-other">{{ forloop.counter }}</span>
                        {% endif %}


                    </td>
                    <td class="user-cell">
                        <div class="user-info">
                            <div class="username">{{ participant.user.username }}</div>
                        </div>
                    </td>

                    <td class="battles-cell">
                        <span class="battles-count">{{ participant.total_battles|default:0 }}</span>
                    </td>
                    <td class="record-cell">
                        <div class="record-display">
                            <span class="wins">{{ participant.wins|default:0 }}</span>
                            <span class="separator">/</span>
                            <span class="losses">{{ participant.losses|default:0 }}</span>
                            <span class="separator">/</span>
                            <span class="draws">{{ participant.draws|default:0 }}</span>
                        </div>
                    </td>
                    <td class="winrate-cell">
                        <div class="winrate-display">
                            <span class="winrate-value">{{ participant.win_rate|default:0 }}%</span>
                            <div class="winrate-bar">
                                <div class="winrate-fill" data-width="{{ participant.win_rate|default:0 }}"></div>
                            </div>
                        </div>
                    </td>
                    <td class="score-cell">{{ participant.total_score|default:0 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">🥇</div>
            <h3>暂无排行榜数据</h3>
            <p>常规赛尚未开始或没有参赛选手</p>
        </div>
        {% endif %}
    </div>


</div>

<script>
    // 设置进度条宽度
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.winrate-fill[data-width]').forEach(function(element) {
            const width = element.getAttribute('data-width');
            element.style.width = width + '%';
        });
    });

    // AJAX刷新排行榜功能
    async function refreshLeaderboard() {
        const refreshBtn = document.querySelector('.btn-refresh');
        const refreshIcon = refreshBtn.querySelector('.refresh-icon');

        // 显示加载状态
        refreshBtn.disabled = true;
        refreshIcon.classList.add('fa-spin');
        refreshBtn.innerHTML = '<i class="fas fa-sync-alt refresh-icon fa-spin"></i> 刷新中...';

        try {
            // 调用API获取最新数据
            const response = await fetch(`/battles/api/worldcup/{{ worldcup.id }}/regular-season-data/`);

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();

            if (data.status === 'success') {
                // 更新统计信息
                updateStatsCards(data.data);

                // 更新排行榜
                updateLeaderboard(data.data.participants);
                
            } else {
                throw new Error(data.error || '刷新失败');
            }
        } catch (error) {
            console.error('刷新排行榜失败:', error);
            alert('刷新失败，请稍后重试');
        } finally {
            // 恢复按钮状态
            refreshBtn.disabled = false;
            refreshIcon.classList.remove('fa-spin');
            refreshBtn.innerHTML = '<i class="fas fa-sync-alt refresh-icon"></i> 刷新排行榜';
        }
    }

    // 更新统计卡片
    function updateStatsCards(data) {
        // 更新参赛人数
        const participantCountElement = document.querySelector('.stat-card:nth-child(1) .stat-value');
        if (participantCountElement) {
            participantCountElement.textContent = data.total_participants || 0;
        }

        // 更新总对战数
        const totalBattlesElement = document.querySelector('.stat-card:nth-child(2) .stat-value');
        if (totalBattlesElement) {
            totalBattlesElement.textContent = data.progress.total_matches || 0;
        }

        // 更新已完成对战数
        const finishedBattlesElement = document.querySelector('.stat-card:nth-child(3) .stat-value');
        if (finishedBattlesElement) {
            finishedBattlesElement.textContent = data.progress.finished_battles || 0;
        }

        // 更新进行中对战数
        const runningBattlesElement = document.querySelector('.stat-card:nth-child(4) .stat-value');
        if (runningBattlesElement) {
            runningBattlesElement.textContent = data.progress.running_battles || 0;
        }

        // 更新等待中对战数
        const waitingBattlesElement = document.querySelector('.stat-card:nth-child(5) .stat-value');
        if (waitingBattlesElement) {
            waitingBattlesElement.textContent = data.progress.pending_battles || 0;
        }

        // 更新错误对战数
        const errorBattlesElement = document.querySelector('.stat-card:nth-child(6) .stat-value');
        if (errorBattlesElement) {
            errorBattlesElement.textContent = data.progress.error_battles || 0;
        }
    }

    // 更新排行榜表格
    function updateLeaderboard(participants) {
        const tbody = document.querySelector('.leaderboard-table tbody');
        if (!tbody || !participants) return;

        // 清空现有内容
        tbody.innerHTML = '';

        // 重新生成排行榜行
        participants.forEach((participant, index) => {
            const row = document.createElement('tr');

            // 排名
            const rank = index + 1;
            let rankHtml = '';
            if (rank === 1) {
                rankHtml = '<span class="medal">🥇</span><span class="rank-1">' + rank + '</span>';
            } else if (rank === 2) {
                rankHtml = '<span class="medal">🥈</span><span class="rank-2">' + rank + '</span>';
            } else if (rank === 3) {
                rankHtml = '<span class="medal">🥉</span><span class="rank-3">' + rank + '</span>';
            } else if (rank <= 16) {
                rankHtml = '<span class="rank-top16">' + rank + '</span>';
            } else {
                rankHtml = '<span class="rank-other">' + rank + '</span>';
            }

            row.innerHTML = `
                <td class="rank-cell">
                    ${rankHtml}
                </td>
                <td class="user-cell">
                    <div class="user-info">
                        <div class="username">${participant.username || 'Unknown'}</div>
                    </div>
                </td>
                <td class="battles-cell">
                    <span class="battles-count">${participant.total_battles || 0}</span>
                </td>
                <td class="record-cell">
                    <div class="record-display">
                        <span class="wins">${participant.wins || 0}</span>
                        <span class="separator">/</span>
                        <span class="losses">${participant.losses || 0}</span>
                        <span class="separator">/</span>
                        <span class="draws">${participant.draws || 0}</span>
                    </div>
                </td>
                <td class="winrate-cell">
                    <div class="winrate-display">
                        <span class="winrate-value">${(participant.win_rate || 0).toFixed(1)}%</span>
                        <div class="winrate-bar">
                            <div class="winrate-fill" style="width: ${participant.win_rate || 0}%"></div>
                        </div>
                    </div>
                </td>
                <td class="score-cell">${participant.score || 0}</td>
            `;

            tbody.appendChild(row);
        });
    }
</script>
{% endblock %}

